<template>

  <div>
    <el-header class="head">
      <div>
        <img src="../../assets/鸡蛋.png" alt="" class="home_pic">
        <span>eggBlog</span>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" active-text-color="#409EFF">
        <el-menu-item index="1" @click="tohome">主页</el-menu-item>
        <el-menu-item index="2">分类</el-menu-item>
        <el-menu-item index="3" @click="toperson">个人中心</el-menu-item>
        <el-menu-item index="4" @click="tomanage">管理</el-menu-item>
      </el-menu>
      <div class="home_input">
       <el-col :span="20"  >
       <!-- <el-input
        placeholder="SerchBlogs"
        v-model="inputTitle"  @keyup.enter.native="search(inputTitle)">
        <i slot="prefix" class="el-input__icon el-icon-search" @click="search(inputTitle)"></i>
        </el-input> -->
        <a-input-search placeholder="SerchBlogs" style="width: 200px;position:relative;top:13px" @search="search(inputTitle)" v-model="inputTitle"/>
      </el-col>
      </div>
      <div class="line"></div>
    <!-- <a style="font-size:15px;position:relative;top:18px" @click="toconfirm()">{{status}}</a> -->
    <el-button type="text" @click="open">{{status}}</el-button>
    
    </el-header>
<br>
  <el-button-group >
    <!--按钮组，按照博客分类命名-->
    <el-button type="primary" @click="displayAll()">全部</el-button>
    <el-button type="primary" v-for="item in type" @click="display(item.type)" :key="item.type">{{item.type}}</el-button>
  </el-button-group>
    <!--每页展示文章，按照每页的页数进行截取展示-->
    <el-card v-for="item in blogtype.slice((currentPage-1)*size,currentPage*size)" class="card" :key="item.number">
      <div slot="header">
        <!--标题链接用来点击进入详情页面，跳转路径设置传入blog.number的参数-->
        <a href="#" class="main-text" @click="toblog2(item.number)">{{item.title}}</a>
        <!-- <router-link class="main-text" :to="'/blog2'">{{item.title}}</router-link> -->
      </div>
      <div class="content">{{item.content}}</div><!--分割线-->
      <el-divider></el-divider>
      <!--博客各个内容展示-->
      <i class="el-icon-user-solid article-icon">{{item.author}}</i>
      <i class="el-icon-date article-icon">{{item.publishTime}}</i>
      <i class="el-icon-price-tag article-icon">{{item.type}}</i>
      <i class="el-icon-star-off">{{item.collectNum}}</i>
      <i class="el-icon-thumb">{{item.thumbsUP}}</i>
      <i class="el-icon-chat-dot-round">{{item.collectNum}}</i>

    </el-card>
    <!--分页显示-->
    <el-pagination
      :current-page="currentPage"
      :page-size="size"
      layout="total, prev, pager, next, jumper"
      :total="blogtype.length"
      @current-change="handleCurrentChange">
    </el-pagination>
    <el-card>`
      <div>
        <!--下方信息框-->
        <div href="#" class="m-text-thin">Email：onestarlr@hotmail.com</div>
        <div href="#" class="m-text-thin">QQ：316392836</div>
        <div style="font-size: large;font-weight: bold;width: 100px;display: inline-block" >关注公众号
          <img src="../../assets/7.png"  class="image" alt="" />
        </div>
        <div style="font-size: large;font-weight: bold;width: 100px;display: inline-block" >问题交流（QQ群）
          <img src="../../assets/6.jpg" class="image" alt=""/></div>
      </div>
    </el-card>

  </div>

</template>

<script>
import axios from "axios";

export default {

  data() {
    return {
      blog: [{
        number: '',
        author: '',
        title: '',
        content: '',
        thumbUp: '',
        type: '',
        publishTime: '',
        commentNum:'',
        collectNum:'',
      }],
      blogtype: [{
        number: '',
        title: '',
        author: '',
        content: '',
        thumbUp: '',
        type: '',
        publishTime: '',
        commentNum:'',
        collectNum:'',
      }],

      type: [{
        type: '',
      }],
      currentPage: 1,
      size: 5,
    }
  },
  created() {
    const _this = this
    axios.get('http://localhost:8081/type/findAll').then(function (resp) {
      _this.blog = resp.data
      _this.blogtype = _this.blog
      var typeq = _this.blog.filter((x, index, self) => {
        var res = []
        _this.blog.forEach((item, i) => {
          res.push(item.type)
        })
        return res.indexOf(x.type) === index
      })
      _this.type = typeq

    })
  },
  methods: {
    display: function (type) {
      this.currentTag = type;
      var typef = []
      for (var i in this.blog) {
        if (this.blog[i].type === this.currentTag) {
          typef.push(this.blog[i])
        }
      }
      this.blogtype = typef
    },
    displayAll() {
      this.blogtype = this.blog
    },
    search(inputTitle){
      window.sessionStorage.setItem('query',inputTitle)
      this.$router.push('/search')
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    toblog2(number){
      this.$router.push('/blog2')
      window.sessionStorage.setItem('number',number)
    },
       tomanage(){
      if(window.sessionStorage.getItem('token')!=null)
      {
        this.$router.push('/list')
      }
      else if(window.sessionStorage.getItem('admintoken')!=null)
      {
        this.$router.push('/manage')
      }
      else{
        this.$router.push('/login')
      }
      },   
      tohome(){
        this.$router.push('/home')
      },
      toperson(){
        if(window.sessionStorage.getItem('token')!=null||window.sessionStorage.getItem('admintoken')!=null)
        {
          this.$router.push('/infoside')
        }
        else{
           this.$message.warning('请先进行登陆')
            this.$router.push('/login')
        }
      },  
  },
}
</script>

<style scoped>

.card{
  margin: auto;

  width: 70%;

  border: 3px solid lightblue;

  padding: 10px;
}
.content{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.image{
  height: 100px;
  width: 100px;
}
.home_container{
  height: 100%;
  width: 100%;
  background-color: #F2F2F2;
}
.head{
  background-color: #FFFFFF;
}
.el-header{
  background-color: Transparent;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  font-size: 20px;
}
.home_pic{
  height: 50px;
  width: 50px;
}
</style>
